import { View, Text,StyleSheet,FlatList,Image, TouchableOpacity} from 'react-native'
import React,{useState,useEffect} from 'react'
import api from '../config'
import XzLoadMore from '../components/XzLoadMore'
const ss=StyleSheet.create({
  product:{
    flexDirection:'row',
    alignItems:'center',
    backgroundColor:'#fff',
    // borderBottomWidth:1
  },
  title:{
    fontSize:16,
    color:'#333',
    
  },
  price:{
    fontSize:18,
    color:'red',
    fontWeight:'bold',
    
  }
})
export default function ProductList({navigation}) {
  // 状态数据 --- 分页器
  let [pager,setPager]=useState({
    pno:0,
    data:[]
  })
  // 状态数据 --- '加载中'组件状态
  let [loadStatus,setLoadStatus]=useState('hasMore')
  let [refreshing,setRefreshing]=useState(false)

  function loadNextPageData(){
    setLoadStatus('loading')
    let pno =pager.pno+1
    let url=api.productList +'?pno='+pno
    console.log(url);
    fetch(url).then(res=>{
      return res.json()
    })
    .then(body=>{
      // console.log(body);
      body.data=[...pager.data,...body.data]
      setPager(body)
      if(body.pno>=body.pageCount){
        setLoadStatus('noMore')
      }else{
        setLoadStatus('hasMore')

      }
    })
    .catch(err=>{
      console.log(err);
    })
    .finally(()=>{
      setRefreshing(false)
    })
  }
  // 组件挂载执行的方法
  useEffect(()=>{
    loadNextPageData()
  },[])
 function _renderitem({item,index}){
  return (
    <TouchableOpacity style={ss.product}
      activeOpacity={0.6} 
      onPress={()=>navigation.navigate('pdetails',{pid:item.lid})}>
      <Image style={{width:100,height:100,margin:6}} 
             source={{uri:api.base+item.pic}}/>
      <View style={{justifyContent:'space-between',flex:1}}>
        <Text style={ss.title} numberOfLines={2}>{item.title}</Text>
        <Text style={ss.price}>￥{item.price}</Text>
      </View>
    </TouchableOpacity>
  )
 }
    function _ListHeaderComponent(){
      return (<Text style={{fontSize:24,fontWeight:"bold",textAlign:"center", color:'#0aa1ed',backgroundColor:'#fff',paddingTop:20}}>商品库存记录</Text>)
    }
    function _ItemSeparatorComponent(){
      return (<View style={{height:1,backgroundColor:'#ddd',marginHorizontal:3}}></View>)
    }
    function _ListFooterComponent(){
      return (<XzLoadMore status={loadStatus}/>)
    }
    function _onEndReached(){
      console.log('=====到底了======');
      if(loadStatus==='noMore') return
      loadNextPageData()
    }
    function _onRefresh(){
      console.log('----下拉刷新中~~~');
      setRefreshing(true)
      pager={pno:0,data:[]}
      loadNextPageData()
    }
  return (
    <View style={{backgroundColor:'#eee',paddingVertical:20}}>
      <FlatList
        data={pager.data}
        renderItem={_renderitem}
        ListHeaderComponent={_ListHeaderComponent}
        ItemSeparatorComponent={_ItemSeparatorComponent}
        ListFooterComponent={_ListFooterComponent}
        onEndReached={_onEndReached}
        onEndReachedThreshold={0.1}
        onRefresh={_onRefresh}
        refreshing={refreshing}
      />
    </View>
  )
}